<html>
	<head>
		<title>WebRTC capture video and audio</title>
		<style>
			.none{
				-webkit-filter: none;
			}
			.blur{
				-webkit-filter: blur(3px);
			}
			.grayscale{
				-webkit-filter: grayscale(1);
			}
			.invert{
				-webkit-filter: invert(1);	
			}
			.sepia{
				-webkit-filter: sepia(1);
			}
			.opacity{
				-webkit-filter:: opacity(0.5);
			}
		</style>
	</head>
	<body>
		<div style="padding-left:200px;padding-top:50px;">
			<div><label>audio Source:</label><select id="audioSource"></select></div>
			<div><label>audio Output:</label><select id="audioOutput"></select></div>
			<div><label>video Source:</label><select id="videoSource"></select></div>
			<div><label>Filter:</label>
				<select id="filter">
					<option value="none">None:无特效</option>
					<option value="blur">blur:模糊</option>	
					<option value="grayscale">Grayscale:灰色</option>
					<option value="invert">Invert:反色</option>
					<option value="sepia">sepia:褐色</option>
					<option value="opacity">Opacity:透明度</option>
				</select>
			</div>
			<div>
				<audio autoplay controls id="audioplayer"></audio>
			</div>
			<div>
				<table>
					<tr>
                                		<td><video autoplay playsinline id="player"></video></td>
						<td><video playsinline id="recplayer"></video></td>
						<td><div id="constraints" style="border:solid 1px;width:400px;height:400px;word-wrap:break-word;border-color:cyan"></div></td>
					</tr>
					<tr>
						<td><button id="record">Start Record</button></td>
						<td><button id="recplay" disabled>Play</button></td>
						<td><button id="download" disabled>Download</button></td>
					</tr>
				</table>
                        </div>
			<div>
				<button id="snapshot">Take snapshout</button>
			</div>
			<div>
				<canvas id="picture"></canvas>
			</div>
			
		</div>
		<script src="./js/client_share.js"></script>
		<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>	
	</body>
</html>
